// 整合函数-登录校验
checkLogin()

// 整合函数-渲染用户名
renderUsername()

// 整合函数-退出登录逻辑
registerLogout()

// 抽取函数-获取学员数据
async function getData(){
    // 获取数据
    const res = await axios.get('/students')
    // console.log(res)
    // 渲染数据
    const html = res.data.map(v=>{
        const { name,age,gender,group,hope_salary,salary,province,city,area,id } = v
        return `
        <tr>
          <td>${name}</td>
          <td>${age}</td>
          <td>${gender===0?'男':'女'}</td>
          <td>第${group}组</td>
          <td>${hope_salary}</td>
          <td>${salary}</td>
          <td>${province+city+area}</td>
          <td data-id="${id}">
            <a href="javascript:;" class="text-success mr-3"><i class="bi bi-pen"></i></a>
            <a href="javascript:;" class="text-danger"><i class="bi bi-trash"></i></a>
          </td>
        </tr> 
        `
    }).join('')
    document.querySelector('.list').innerHTML = html
    document.querySelector('.total').innerText = res.data.length
}
getData()

// 显示添加学员弹框
// 实例化bootstrap
const modalDom = document.querySelector('#modal')
const modal = new bootstrap.Modal(modalDom)
// 点击添加按钮，显示弹框
document.querySelector('#openModal').addEventListener('click',()=>{
  // 调整弹框逻辑
  // 修改标题
  document.querySelector('.modal-title').innerText = '新增学员'
  // 表单重置
  document.querySelector('#form').reset()
  // 清空籍贯（省市区）
  citySelect.innerHTML = '<option value="">--城市--</option>'
  areaSelect.innerHTML = '<option value="">--地区--</option>'
  // 删除自定义属性
  modalDom.dataset.id = ''

  // 显示弹框
  modal.show()
})

// 省市区联动
const provinceSelect = document.querySelector('[name=province]')
const citySelect = document.querySelector('[name=city]')
const areaSelect = document.querySelector('[name=area]')
//渲染省市区数据
async function initSelect(){
  // 渲染省份数据
  const provinceRes = await axios.get('/api/province')
  const proHtml = provinceRes.list.map(v=>{
    return `<option value="${v}">${v}</option>`
  }).join('')
  // console.log(proHtml)
  provinceSelect.innerHTML = `<option value="">--省份--</option>${proHtml}`

  // 渲染城市数据
  provinceSelect.addEventListener('change',async () => {
    const cityRes = await axios.get('/api/city',{
      params:{
        pname: provinceSelect.value
      }
    })
    const cityHtml = cityRes.list.map(v => {
      return `<option value="${v}">${v}</option>`
    }).join('')
    citySelect.innerHTML = `<option value="">--城市--</option>${cityHtml}`
    // 此处要返回清空地区列表，否则会出现bug
    areaSelect.innerHTML = '<option value="">--地区--</option>'
  })

  // 渲染地区数据
  citySelect.addEventListener('change',async () => {
    const areaRes = await axios.get('/api/area',{
      params:{
        pname: provinceSelect.value,
        cname: citySelect.value
      }
    })
    const areaHtml = areaRes.list.map(v => {
      return `<option value="${v}">${v}</option>`
    }).join('')
    areaSelect.innerHTML = `<option value="">--地区--</option>${areaHtml}`
  })
}
initSelect()

// 数据新增
document.querySelector('#submit').addEventListener('click',()=>{
  
  if(modalDom.dataset.id){
    // 后续调用保存修改函数
    saveEdit()
  }else{
    // 调用新增学员函数
    addStudent()
  }
})
// 抽取函数-新增学员
async function addStudent(){
  // 数据收集+转换+提交
  const form = document.querySelector('#form')
  const data = serialize(form,{hash:true, empty: true})
  // 转换
  data.age = +data.age
  data.gender = +data.gender
  data.hope_salary = +data.hope_salary
  data.salary = +data.salary
  data.group = +data.group
  // console.log(data)
 
  try{
    // 提交 -成功
    const res = await axios.post('/students',data)
    // 调用轻提示函数
    showToast(res.message)
    // 调用获取学员数据函数
    getData()

  }catch(error){
    // -失败
    console.dir(error)
    showToast(error.response.data.message)
  }
  // 隐藏弹框
  modal.hide()
}

// 绑定事件
document.querySelector('.list').addEventListener('click',(e)=>{
  // 点击了删除按钮才生效 -调用对应函数
  if(e.target.classList.contains('bi-trash')){
    // console.log('点击了删除')
    // console.log(e.target.parentNode.parentNode.dataset.id)
    const id = e.target.parentNode.parentNode.dataset.id
    // 调用函数-删除数据
    delStuder(id)
  }
  // 点击编辑标签-调用对应函数
  if(e.target.classList.contains('bi-pen')){
    const id = e.target.parentNode.parentNode.dataset.id
    // 调用编辑数据函数
    editStudent(id)
  }
})
// 抽取函数-删除数据
async function delStuder(id){
  // 获取id+调用接口
  await axios.delete(`/students/${id}`)
  // 重新渲染数据
  getData()
}
// 抽取函数-编辑学员数据
async function editStudent(id){
  // console.log('编辑',id)
  // 获取id+调用接口-获取学生数据
  const res = await axios.get(`/students/${id}`)
  console.log(res)
  // 修改标题
  document.querySelector('.modal-title').innerText = '修改学员'
  // 设置输入框
  const keyArr = ['name','age','group','hope_salary','salary']
  keyArr.forEach(key=>{
    document.querySelector(`[name=${key}]`).value = res.data[key]
  })
  // 设置性别 （0男，1女）
  const {gender} = res.data
  // 伪数组（男checkbox,女checkbox）
  const chceks = document.querySelectorAll('[name=gender]')
  chceks[gender].checked = true

  // 设置籍贯
  const {province,city,area } = res.data
  // 设置省 （设置select标签的value属性，对应的option会被选中）
  provinceSelect.value = province
  // 设置市
 const cityRes = await axios.get('/api/city',{
    params:{
      pname: province
    }
  })
  const cityHtml = cityRes.list.map(v=>{
    return `<option value="${v}">${v}</option>`
  }).join('')
  citySelect.innerHTML = `<option value="">--城市--</option>${cityHtml}`
  citySelect.value = city

  // 设置区
  const areaRes = await axios.get('/api/area',{
    params:{
      pname: province,
      cname: city
    }
  })
  const areaHtml = areaRes.list.map(v=>{
    return `<option value="${v}">${v}</option>`
  })
  areaSelect.innerHTML = `<option value="">--地区--</option>${areaHtml}`
  areaSelect.value = area

  // 显示弹框
  modal.show()

  // 保存学员id，用来区分 新增（dataset.id不存在）编辑（dataset.id有值）
  modalDom.dataset.id = id
}

// 抽取函数-保存修改学员数据
async function saveEdit(){
  console.log('保存修改')
  // 数据收集+转换+提交
  const form = document.querySelector('#form')
  const data = serialize(form,{hash: true,empty: true})
  // console.log(data)
  data.age = +data.age
  data.gender = +data.gender
  data.hope_salary = +data.hope_salary
  data.salary = +data.salary
  data.group = +data.group

  try {
    // 修改成功
    const saveRes = await axios.put(`/students/${modalDom.dataset.id}`,data)
    // 调用轻提示函数
    // console.log(saveRes)
    showToast(saveRes.message)
    // 调用数据渲染函数
    getData()
  } catch (error) {
    // 修改失败
    console.dir(error)
    showToast(error.response.data.message)

  }
  // 隐藏弹框
  modal.hide()
}